<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
  </head>

  <body>
  <div>

    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ApiDefController"
         class="page container-pf-nav-pf-vertical container-fluid"
         data-field="page"
         ng-cloak=""
         ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
      <!-- Entity Summary Row -->
      <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

      <!-- Navigation + Content Row -->
      <div class="row">
        <!-- Left hand nav -->
        <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
        <!-- /Left hand nav -->

        <!-- Content -->
        <div class="col-md-10 apiman-entity-content">
          <div class="col-md-10">
            <div class="title"
                 apiman-i18n-key="api-def">API Definition</div>
            <div class="apiman-label-faded">
              <p apiman-i18n-key="api-def-explanation">
                Optionally, a Swagger or OpenAPI definition about your API can be provided.
                Adding a definition file will allow consumers to better understand how to use your API. Copy/paste
                or drag and drop your Swagger API definition into the text area below.
              </p>
            </div>
            <div class="apiman-divider-20" ng-hide="definitionType === 'None'">
              <div class="alert alert-warning">
                <span class="pficon pficon-info"></span>
                <p apiman-i18n-key="api-def.replaceInfo">If the API is published, the endpoint in the definition
                  will be automatically replaced by the endpoint of the gateway.</p>
                <p apiman-i18n-key="api-def.downloadInfo">You can retrieve the definition with the following link&#58;&#32;</p>
                <p><strong>{{ apimanDefinitionUrl }}</strong></p>
              </div>
            </div>
            <form name="apidefinitionform">
              <div>
                <span class="clearfix top-spacer bottom-spacer"
                      apiman-i18n-key="api-definition-label">API Definition:</span>
                <select apiman-i18n-key="api-def.choose-type"
                        title="Choose a type..."
                        apiman-select-picker=""
                        ng-model="selectedDefinitionType"
                        class="selectpicker"
                        ng-disabled="isEntityDisabled()"
                        ng-options="type.label for type in typeOptions track by type.value">
                </select>

                <div class="top-spacer">
                  <span class="clearfix top-spacer bottom-spacer"
                        apiman-i18n-key="api-definition-url-label">API Definition URL:
                  </span>
                  <div class="input-group" style="width: 100%">
                    <input ng-model="updatedApiDefinitionUrl"
                           name="definitionUrl"
                           class="apiman-form-control form-control"
                           type="text"
                           ng-disabled="selectedDefinitionType.value == 'None'"
                    >
                    <span class="input-group-btn">
                      <div apiman-permission="apiEdit"
                           ng-show="!isEntityDisabled()"
                           class="actions definition"
                      >
                        <button type="button" class="btn btn-default"
                                ng-click="updateDefinitionFromUrl()"
                                style="margin-left: 5px"
                                ng-disabled="updatedApiDefinitionUrl == null || selectedDefinitionType.value == 'None'"
                                apiman-i18n-key="load-definition">Load Definition
                        </button>
                      </div>
                    </span>
                  </div>
                </div>

                <textarea style="width: 100%; min-height: 300px;"
                          apiman-i18n-key="enter-api-definition"
                          id="api-definition"
                          placeholder="Copy/paste or drag and drop your API Definition in here!"
                          apiman-drop-text
                          ng-model="updatedApiDefinition"
                          ng-init="focus=false;blur=false;"
                          ng-class="{ myFocus: focus, myBlur: blur }"
                          ng-focus="focus=true;blur=false;"
                          ng-blur="blur=true;focus=false;"
                          data-field="data"
                          class="apiman-form-control form-control apiman-form-data top-spacer"
                          ng-disabled="isEntityDisabled() || selectedDefinitionType.value == 'None'">
                </textarea>
              </div>

              <div apiman-permission="apiEdit"
                   ng-show="!isEntityDisabled()"
                   class="actions definition"
                   style="margin-top: 20px"
              >
                <button type="button" class="btn btn-default" ng-mousedown="downloadDefinition()"
                        ng-disabled="isDirty || !apiDefinition" apiman-i18n-key="download">Download
                </button>
                <button ng-disabled="!isDirty  || updatedApiDefinition.length == 0 || selectedDefinitionType.value == 'None'"
                        ng-mousedown="saveApi()"
                        apiman-action-btn=""
                        class="btn btn-primary"
                        data-field="saveButton"
                        apiman-i18n-key="save"
                        placeholder="Saving..."
                        data-icon="fa-cog" >Save
                </button>
                <button ng-disabled="!isDirty"
                        ng-mousedown="reset()"
                        class="btn btn-default"
                        data-field="cancelButton"
                        apiman-i18n-key="cancel">Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
        <!-- /Content -->
      </div>
      <div ng-include="'plugins/api-manager/html/modals/errorModal.html'"></div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </div>
  </body>
</html>
